


import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { Form, Spin, message } from 'antd'
import { getUseInfoList } from '../../Statistics/VehicleUsageStats/service'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'
import { getInsuranceList } from './service'


interface InsuranceRecordType {
  insurance_id:string,
  vehicle_id:string,
  begin_date:Date,
  end_date:Date,
  insurance_company:string,
  insurance_info:string
  
}
export default function VehicleInsuranceRecord() {
  const [form] = Form.useForm();
 
  const [repairInfo, setRepairInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[]|null>(null)
  const [loading, setLoading] = React.useState(false)


  const columns=[
    {
      title: '保险编号',
      dataIndex: 'insurance_id',

    },
    {
      title: '车牌号',
      dataIndex: 'vehicle_id',
      search:true,
    },
    {
      title: '开始日期',
      dataIndex: 'begin_date',
      
    },
    {
      title:"结束日期",
      dataIndex:"end_date",
    },
    {
      title:"保险公司",
      dataIndex:"insurance_company",
    },
    {
      title: '保险信息',
      dataIndex: 'insurance_info',
      ellipsis: true
    }
   
  ]

  const queryList = async () => {
    setLoading(true)
    await getInsuranceList().then(res => {
      setRepairInfo(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
    <div className="page-title-container">
      <div className="page-title">车辆保险记录</div>
    </div>
    <div className="page-content">
      {/* <VTable></VTable> */}
      {/* <VCard type="card"></VCard> */}
      <Spin spinning={loading}>
        <SearchForm
          form={form}
          exportToExcel={()=>{
            ExportToExcel('/api/insurance/export','保险记录.xlsx')
          }
            
           }
          params={[
            { type: 'date', name: 'date', label: '时间' }
          ]}
          onFinsh={()=>{
            const values = form.getFieldsValue();
            const params:{start_time?:string,end_time?:string} = {};
            if(values.date){
              params.start_time = values.date[0].format('YYYY-MM-DD');
             params.end_time = values.date[1].format('YYYY-MM-DD');
              const filteredData = repairInfo.filter(item => {
                const startDate = params.start_time as string;
                const endDate =  params.end_time as string;
                const startDate1 = item.begin_date;
                const endDate1 = item.end_date;
                // console.log(startDate1,startDate,endDate2,endDate);
                return startDate1 >= startDate && endDate1 <= endDate;
            });
            setFilterData(filteredData);
            }
            else{
              setFilterData(null);
            }
            console.log(values,params);
            // await ...
            
          }}
        />
        <div className="VCard-list">

        <VCard title={'车辆保险信息'} type={'table'} columns={columns} dataSource={filterData||repairInfo}></VCard>
        </div>

      </Spin>
    </div>
  </div>
  )
}
